<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分类查看</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<div th:insert="head.html"></div>


<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    <div class="container col-md-12" v-if="pageData.total<1">
        <h3 style="text-align: center">暂无 {{goodsType.typeName}} 类宝贝</h3>
    </div>

    <div class="container" v-if="pageData.total>0">

        <div class="row">
            <div class="col-md-12">
                <p style="background-color: cornflowerblue ; color: white; font-size: 30px"> {{goodsType.typeName}}
                    类宝贝</p>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 col-md-4" v-for="goods in pageData.records">
                <div class="thumbnail">
                    <img :src="goods.productImgsrc" alt="..." class="col-sm-6 col-md-6"
                         style="width: 140px;height: 130px">
                    <div class="caption text-left">
                        <p>书名:<span v-text="goods.productName">name</span></p>
                        <p>价格:<span v-text="goods.productPrice">price</span></p>
                        <p>
                            <a class="btn btn-primary" @click.prevent="toDetail(goods.id)">详情</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            <a class="btn btn-success">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-md-offset-5 col-lg-offset-4col-xl-offset-5">
                <ul class="pagination justify-content-center">
                    <li><a href="" @click.prevent="goPage(pageData.current-1)">上一页</a></li>
                    <li><a href="" v-for="num in pageData.pages" v-text="num" @click.prevent="goPage(num)">n</a></li>
                    <li><a href="" @click.prevent="goPage(pageData.current+1)">下一页</a></li>
                </ul>
            </div>
        </div>

    </div>


</div>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            goodsType: {
                id: -1,
                typeName: ''
            },
            pageData: {
                current: 1,
                size: 3,
                total: -1,
                records: [],
                pages: -1
            }

        },
        methods: {
            initGoodsTypeInfo(id) {
                $.get('/productType/getType', {typeId: id}, data => {
                    this.goodsType = data;
                })
            }
            ,
            initPageData(id) {
                $.get('/product/getPageList', {typeId: id}, data => {
                    this.pageData.current = data.current
                    this.pageData.size = data.size
                    this.pageData.total = data.total
                    this.pageData.records = data.records
                    this.pageData.pages = data.pages
                })
            }
            ,
            toDetail(id) {
                console.log(id)
                sessionStorage.setItem("productId", id)
                $.get('/product/toDetail', {id: id}, data => {
                    location.href = '/singleShopping.html'
                })
            }
            ,
            goPage(pageNum) {
                if (pageNum > this.pageData.pages || pageNum <=0) {
                    pageNum = 1
                }
                console.log(this.pageData.pages);
                let typeId = sessionStorage.getItem("typeId");
                $.get('/product/getPageList', {page: pageNum, typeId: typeId}, data => {
                    this.pageData.current = data.current
                    this.pageData.size = data.size
                    this.pageData.total = data.total
                    this.pageData.records = data.records
                    this.pageData.pages = data.pages
                })
            }
        },
        created() {
            let id = sessionStorage.getItem("typeId");
            this.initGoodsTypeInfo(id);
            this.initPageData(id);

        }
    })

</script>


<div th:insert="foot.html"></div>


</body>
</html>